<template>
    <div class="app-container">
      <!--搜索-->
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
  
        <el-form-item label="推送日期" prop="dateTimeRange">
            <el-date-picker
                v-model="dateTimeRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="推送模板" prop="templateId">
            <el-input v-model="queryParams.templateId" clearable></el-input>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!--按钮区-->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >删除</el-button>
        </el-col>
      </el-row>
  
      <!--表格区-->
      <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" />
        <el-table-column label="序号" align="center" prop="id" width="50"/>
        <el-table-column label="模板" align="center" prop="templateId" width="380"/>
        <el-table-column label="推送内容" align="center" prop="content" :show-overflow-tooltip="true"/>
        <el-table-column label="推送时间" align="center" prop="sendTime"  width="160">
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.sendTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="推送状态" align="center" prop="status">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'" round>{{
                  scope.row.status == 1 ? "成功" : "失败"
                }}</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="接收人" align="center" prop="receiver" />

        <el-table-column label="返回结果" align="center" prop="backInfo" :show-overflow-tooltip="true" />

        <el-table-column label="操作" align="center" width="100" >
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    circle type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
    import {listPushMessage,delPushMessage} from '@/api/wechat/pushMessage'

  export default {
    name: "PushMessage",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 表格数据
        messageList: [],
        //查询时间
        dateTimeRange:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
          templateId: ''
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询宿舍卫生列表 */
      getList() {
        this.queryParams.startTime = this.dateTimeRange[0];
        this.queryParams.endTime = this.dateTimeRange[1];
        this.loading = true;
        listPushMessage(this.queryParams).then(response => {
            this.messageList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateTimeRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否删除', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delPushMessage(ids);
          }).then(() => {
            this.getList();
          }).catch(function() {});
      }
    }
  };
  </script>
  